Astro Boilerplate with TypeScript and Tailwind CSS
🚀 Astro Boilerplate is starter code for your blog based on Astro with Tailwind CSS 3.0. ⚡️ Made with Astro, TypeScript, ESLint, Prettier, Tailwind CSS.
Clone this project and use it to create your own Astro blog. You can check a Astro templates demo.
Features
A complete Blog feature:
- 🎈 Syntax Highlighting
- 🤖 SEO friendly with sitemap.xml and robots.txt
- ⚙️ RSS feed
- 📖 Pagination
- 🌈 Include a dark blog theme
- ⬇️ Markdown
- 📦 Image lazy loading
Developer experience first:
- 🔥 Astro
- 🎨 Tailwind CSS with aspect ratio and typography plugin
- 🎉 TypeScript
- ✏️ ESLint compatible with .astro files
- 🛠 Prettier compatible with .astro files
- 🦊 Husky
- 🚫 lint-staged
- 🚨 Commitlint
ESLint with:
- Airbnb styled guide
- TypeScript compatible
- Astro compatible
- Automatically remove unused imports
- Import sorting
- Tailwind CSS plugin
Philosophy
- Minimal code
- SEO-friendly
- 🚀 Production-ready
Requirements
- Node.js and npm
Getting started
Run the following command on your local environment:
git clone --depth=1 https://github.com/ixartz/Astro-boilerplate
cd my-project-name
npm install
Then, you can run locally in development mode with live reload:
npm run dev
Open http://localhost:3000 with your favorite browser to see your project.
🧞 Commands
All commands are run from the root of the project, from a terminal:
Command | Action |
---|---|
npm install | Installs dependencies |
npm run dev | Starts local dev server at localhost:3000 |
npm run build | Build your production site to ./dist/ |
npm run preview | Preview your build locally, before deploying |
npm run clean | Remove ./dist folder |
npm run lint | Run ESLint and report styling error |
Contributions
Everyone is welcome to contribute to this project. Feel free to open an issue if you have question or found a bug.
License
Licensed under the MIT License, Copyright © 2022